<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddMarkerRightmenu.component",
    components: {Maptalks},
    setup() {

        // todo:右键报错
        const clickItem = (context) => {
            console.log(context);
        }

        let mapOnLoadCB = (map) => {
            map.setCenter([106, 29])

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_RIGHT_MENU_LAYER).addTo(map);

            let geometry = new maptalks.Marker([106, 29]).addTo(layer);

            let options = {
                "custom": true,
                "items": `
                    <ul class="custom_menu">
                        <li onclick="clickItem(this);">Locate</li>
                        <li onclick="clickItem(this);">Mark</li>
                        <li onclick="clickItem(this);">Identify</li>
                        <li onclick="clickItem(this);">About</li>
                    </ul>
                `,
            };

            geometry.setMenu(options)/*.openMenu()*/;
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style lang="less">
.custom_menu {
    width: 90px;
    color: #fff;
    background-color: #051127;
    border: 1px solid #0c2c45;
    list-style: none;
    padding: 0;
    li {
        padding: 0 8px;
        font-size: 12px;
        line-height: 24px;
        &:hover {
            background: #0e595e;
            cursor: pointer
        }
        & + li {
            border-top: 1px solid #bbb
        }
    }
}
</style>
